require('../../less/controls/panel.less');
var Layout = require('./Layout');
var ToolBar = require('./ToolBar');
var Draggable = require('../utils/Draggable');
var React = require('react');

module.exports = React.createClass({
	displayName:'Panel',
	getInitialState:function(){
		return {

		}
	},
	componentDidMount:function(){
		if(this.props.draggable){
			var _fixedLayout = this.refs['fixed-layout'],
				_source, _target;
			if(_fixedLayout){
				_source = _fixedLayout.getDOMNode();
				_target = _fixedLayout.refs['layout-head'].getDOMNode();
			} else {
				_source = this.getDOMNode();
				_target = this.refs['drag-target'].getDOMNode();
			}
			Draggable.init(_target, {
				source: _source,
				start: this.props.dragStart || [0, 0],
				vector: this.props.dragVector || ['left', 'top']
			});
		}
	},
	render:function(){
		var _hHeight = this.props.hHeight || 35;
		var _props = this.props,
			_mode = _props.mode || 'fixed',
			_children = _props.children;

		if(_children&&!_children.length){
			_children = [_children];
		}

		switch (_mode) {
			case 'fixed':
				return (
					<Layout
						ref="fixed-layout"
						skin={"c-panel " + (this.props.skin||'')}
						begin={_hHeight}
						end={_props.fHeight}
						style={_props.style}
						hStyle={_props.hStyle}
						bStyle={_props.bStyle}
						fStyle={_props.fStyle}
						direction="V">
							<ToolBar
								icon={_props.icon}
								title={_props.title}
								items={_props.toolbarItems}
								floatDirection={_props.toolbarItemFloatDirection}
								height={_hHeight}>
								{_children&&_children[0]}
							</ToolBar>
							{_children&&_children[1]}
							{_children&&_children[2]}
					</Layout>
				);
			case 'flow':
				var _style = _props.style||{},
					_hStyle = _props.hStyle||{},
					_fStyle = _props.fStyle||{};
				_style.height = 'auto';
				_hStyle.height = _hHeight;
				_fStyle.height = _props.fHeight;
				return (
					<div className={"c-panel " + (this.props.skin||'')} style={_style}>
						<div className="c-panel-head" ref="drag-target" style={_hStyle} >
							<ToolBar
								icon={_props.icon}
								title={_props.title}
								items={_props.toolbarItems}
								floatDirection={_props.toolbarItemFloatDirection}
								height={_hHeight}>
								{_children&&_children[0]}
							</ToolBar>
						</div>
						<div className="c-panel-body" style={_props.bStyle}>
							{_children&&_children[1]}
						</div>
						<div className="c-panel-foot" style={_fStyle} >
							{_children&&_children[2]}
						</div>
					</div>
				);
		}
	}
});
